import React from 'react';
import JsBarcode from 'jsbarcode'; //生成快递单号条形码
import { Modal } from 'antd';
import './shunfeng.css';
import $ from 'jquery';
import Config from '../../common/config';
const config = new Config();
const token = sessionStorage.getItem('token');

export default class ShunfengBill extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            orderIds: this.props.params.orderids.split(','),
            orderData: [],
        }
    }

    componentDidMount() {
        if (this.props.params.iscrm == "0") {
            this.getOrderDetail();
        } else if (this.props.params.iscrm == "1") {
            this.getCrmOrder();
        }
    }
    onLoadIMG() {
        if (this.props.params.state == "print") {
            window.print();
        }
    }
    //获取订单、快递单详情
    getOrderDetail() {
        $.ajax({
            url: `${config.JuseOrder}/orderList/listDetail`,
            type: 'post',
            traditional: true,
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                orderList: this.state.orderIds,
            },
            success: (res) => {
                console.log('订单数据', res);
                if (res.code === 200) {
                    this.setState({
                        orderData: res.data,
                    }, () => {
                        JsBarcode(".barcode").init();
                    });
                } else {
                    Modal.warning({
                        title: '打印快递单失败',
                        content: `获取订单详情和快递信息失败，请关闭页面重试！`,
                    });
                }
            }
        });
    }

    // 获取crm订单
    getCrmOrder() {
        const token = sessionStorage.getItem('token');
        const UserInfo = JSON.parse(sessionStorage.getItem('UserInfo'));
        $.ajax({
            url: `${config.CrmOrder}/getShipOrderNumber`,
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                id: UserInfo.id,
                orderList: this.state.orderIds
            },
            success: res => {
                console.log('获取crm订单', res);
                if (res.code === 200) {
                    this.setState({
                        orderData: res.data,
                    }, () => {
                        JsBarcode(".barcode").init();
                    });
                }
            }
        });
    }

    render() {
        return (
            <div>
                {
                    this.state.orderData.map((item, index) => {
                        return (
                            <div key={index} className="page">
                                <div className="m1 b">
                                    <img src="src/images/logo.jpg" className="img1"
                                        onLoad={this.onLoadIMG.bind(this)} />
                                    <img src="src/images/tel.png" className="img2" />
                                    <p><span className="s1">E</span><span className="s2"></span></p>
                                </div>
                                <div className="m2 b">
                                    <div className="left">
                                        <img className="barcode"
                                            data-value={item.shipOrderNumber}
                                            data-displayValue={false}
                                            data-width="2"
                                            data-height="40"
                                        />
                                        <p>运单号<span>{item.shipOrderNumber}</span></p>
                                    </div>
                                    <div className="right">
                                        <div className="r1 b">
                                            <p>顺丰特惠</p>
                                        </div>
                                        {
                                            item.paymentMethod == "货到付款" &&
                                            <div className="r2">
                                                <p className="p1">代收货款</p>
                                                <p className="p2">卡号：73******16</p>
                                                <p className="p3">
                                                    {item.paymentMethod == "货到付款" ? item.orderMoney : "0"}元
                                                </p>
                                            </div>
                                        }
                                        {
                                            !item.paymentMethod && <div className="r2">
                                                <p className="p1">代收货款</p>
                                                <p className="p2">卡号：73******16</p>
                                                <p className="p3">{item.collectionMoney}元</p>
                                            </div>
                                        }
                                    </div>
                                </div>
                                <div className="m3 b">
                                    <div className="left">
                                        <p>目的地</p>
                                    </div>
                                    <div className="right">
                                        <p>{item.destcode}</p>
                                    </div>
                                </div>
                                <div className="m4 b">
                                    <div className="left">
                                        <p>收件人</p>
                                    </div>
                                    <div className="right">
                                        <p>****** ****** {item.consigneePhone.substring(0, 3) + "*****" + item.consigneePhone.substring(8, 11)} {item.consigneeArea} ************</p>
                                    </div>
                                </div>
                                <div className="m5 b">
                                    <div className="left">
                                        <p>寄件人</p>
                                    </div>
                                    <div className="right-1">
                                        <p>****** ****** 0731-85****53</p>
                                        <p>湖南省长沙市岳麓区************</p>
                                    </div>
                                    <div className="right-2">
                                        {/* <p className="p1">定时派送</p>
                                        <p className="p2">自寄 自取</p> */}
                                        <p className="p1"> </p>
                                        <p className="p2"> </p>
                                    </div>
                                </div>
                                <div className="m6 b cl">
                                    <div className="left">
                                        <div className="l1 b">
                                            <ul className='l1hrb'>
                                                <li>付款方式：寄付月结</li>
                                                <li>月结卡号：73******16</li>
                                                {/* <li>第三方地区：</li> */}
                                                <li>实际重量：</li>
                                            </ul>
                                            <ul>
                                                <li>计费重量：</li>
                                                <li>声明价值：1000</li>
                                                <li>保价费用：<b></b></li>
                                                {/* <li>定时派送：</li> */}
                                            </ul>
                                            <ul>
                                                <li>件数：1<b></b></li>
                                                {/* <li>包装费用：<b></b></li> */}
                                                <li>运费：<b></b></li>
                                                <li>费用合计：<b></b></li>
                                            </ul>
                                        </div>
                                        <div className="l2">
                                            <div className="l2-a">
                                                <p style={{ paddingLeft: '5px' }}>托寄物</p>
                                            </div>
                                            <div style={{ float: 'left' }}>
                                                <p style={{ paddingLeft: '5px' }}>托寄物数量：1</p>
                                                <p style={{ paddingLeft: '5px' }}>玻璃礼品</p>
                                            </div>
                                            <div className="right">
                                                <p>签名：</p>
                                                <p className="p2">年<span>月</span><span>日</span></p>
                                            </div>
                                            <div className="l2-b">
                                                <div className="l2-c">
                                                    <ul>
                                                        <li>收件员：</li>
                                                        <li>寄件日期：</li>
                                                        <li>派件员：</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div className="item b">
                                    <div className="m7 b cl">
                                        <div className="left">
                                            <img className="img1" src="src/images/logo.jpg" />
                                            <img src="src/images/tel.png" />
                                        </div>
                                        <div className="right">
                                            {/* <img src="src/images/code.jpg"/> */}
                                            <img className="barcode"
                                                data-value={item.shipOrderNumber}
                                                data-displayValue={false}
                                                data-width="2"
                                                data-height="40"
                                            />
                                            <p>运单号<span>{item.shipOrderNumber}</span></p>
                                        </div>
                                    </div>
                                    <div className="m8 b">
                                        <div className="left">
                                            <p style={{ paddingLeft: '5px' }}>寄件人</p>
                                        </div>
                                        <div className="right">
                                            <p>****** ****** 0731-85****53</p>
                                            <p>湖南省长沙市岳麓区************</p>
                                        </div>
                                    </div>
                                    <div className="m8 b">
                                        <div className="left">
                                            <p style={{ paddingLeft: '5px' }}>收件人</p>
                                        </div>
                                        <div className="right">
                                            <p>****** ****** {item.consigneePhone.substring(0, 3) + "*****" + item.consigneePhone.substring(8, 11)}</p>
                                            <p>{item.consigneeArea} ************</p>
                                        </div>
                                    </div>
                                    <div className="m10">
                                        <div className="top">
                                            <p>转寄协议客户，代收货款件超范围同意自取</p>
                                            <p>玻璃礼品</p>
                                            <p style={{ textAlign: 'center' }}>{item.parcelNumber}</p>
                                        </div>
                                        <div>
                                            <p>商品共1件</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}

